<template>
  <div class="home">
    <p class="test-text">集成vue + element 日常中遇见的问题以及解决方案</p>
    <div class="test-p">11111111</div>
    <el-select v-model="themeV" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.key"
        :label="item.name"
        :value="item.key">
      </el-option>
    </el-select>
  </div>
</template>

<script>
import { themeList } from '../assets/theme/setTheme'
import { mapGetters } from 'vuex'
export default {
  name: 'home',
  data () {
    return {
      themeV: '',
      options: themeList
    }
  },
  computed: {
    ...mapGetters([
      'theme'
    ])
  },
  created () {
    this.themeV = this.theme
  },
  watch: {
    themeV (d) {
      this.changeTheme(d)
    }
  },
  methods: {
    timeStyle (column) {
      if (column.columnIndex === 0) {
        return 'color:red;display: flex;flex-direction: column;align-items: center'
      }
    },
    changeTheme (d) {
      this.$store.dispatch('ChangeTheme', d)
    }
  }
}
</script>
<style lang="scss">
 .test {
   .test-p {
    color: purple;
   }
 }
</style>
